<template>
  <van-image
    class="my_avator"
    :style="{ 'min-width': `${size}px` }"
    :width="size"
    fit="cover"
    :height="size"
    :radius="radius"
    :src="getAvatorUrl"
    @error="errorState = true"
  />
</template>

<script setup lang="ts">
  import { ref, computed, withDefaults } from 'vue';
  import defaultGroupIcon from '@/static/images/my_groups.png';
  import defaultFriendIcon from '@/static/images/my_friends.png';

  type AvatarProps = {
    size?: number;
    radius?: number;
    src?: string;
    desc?: string;
    isGroup?: boolean;
    isNotification?: boolean;
  };

  const props = withDefaults(defineProps<AvatarProps>(), {
    size: 36,
    radius: 6,
    isGroup: false,
    isNotification: false,
  });

  const errorState = ref(false);

  const getErrorUrl = computed(() => {
    if (props.isGroup) {
      return defaultGroupIcon;
    }
    return defaultFriendIcon;
  });

  const getAvatorUrl = computed(() => {
    if (errorState.value) {
      return getErrorUrl.value;
    }

    // if (props.isNotification) {
    //   return props.src;
    // }

    // if (props.isGroup) {
    //   return props.src || defaultGroupIcon;
    // }

    if (props.src) {
      return props.src;
    }

    return '';
  });
</script>

<style lang="scss" scoped></style>
